<template>
  <div class="home">
    <Header :textName="textName"></Header>
    <div class="sesrchback">
      <div class="search" @click="toSearch">
        <span class="iconfont icon-fangdajing" style="font-size:18px ; margin-right:3px"></span>
        <span>鼠标</span>
      </div>
    </div>
    <BannerList></BannerList>
    <CategoryList></CategoryList>
    <LivePreferred></LivePreferred>
    <div class="image1">
      <img src="@/assets/images/8.png" alt="">
    </div>
    <TodayGroupShop></TodayGroupShop>
    <ProduceList></ProduceList>
    <!-- <Tabbar></Tabbar> -->
  </div>
</template>

<script>
import Header from '@/components/Header'
import Tabbar from "@/components/Tabbar"
import CategoryList from '@/pages/Home/CategoryList'
import BannerList from '@/pages/Home/BannerList'
import LivePreferred from '@/pages/Home/LivePreferred'
import TodayGroupShop from '@/pages/Home/TodayGroupShop'
import ProduceList from '@/pages/Home/ProduceList'
export default {
  name: 'Home',
  data() {
    return {
      textName:"小米有品"
    }
  },
  components:{
    Header,
    Tabbar,
    CategoryList,
    BannerList,
    LivePreferred,
    TodayGroupShop,
    ProduceList
  },
  methods:{
    toSearch(){
      this.$router.push({
       path:'/search'
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .sesrchback{
    width: 100%;
    height: 140px;
    background-color: #9f8052;
    display: flex;
    // position: fixed;
    // margin-top:138px;
    // border:1px solid #9f8052;
    // z-index: 999;
    padding-top: 138px;
    .search{
      width: 90%;
      height: 70px;
      background-color: white;
      border-radius: 36px;
      margin: auto;
     text-align: center;
     line-height: 64px;
     color: gray;
    }
}
  .image1{
    margin-top: 70px;
    width: 100%;
    // height: 100px;
    // background-color: gray;
    img{
      width: 90%;
      margin: 0 auto;
      display: block;
    }
  }
</style>
